<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>供配电系统监控</title>
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <link href="https://cdn.jsdelivr.net/npm/boxicons@2.0.7/css/boxicons.min.css" rel="stylesheet">
    <style>
        .power-monitor {
            padding: 20px;
        }

        .param-card {
            margin-bottom: 20px;
        }

        .param-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 20px;
            margin-bottom: 20px;
        }

        .param-item {
            background: #f8f9fa;
            padding: 20px;
            border-radius: 8px;
            text-align: center;
        }

        .param-item .value {
            font-size: 24px;
            font-weight: bold;
            color: #409EFF;
            margin: 10px 0;
        }

        .param-item .label {
            color: #606266;
            font-size: 14px;
        }

        .param-item .unit {
            color: #909399;
            font-size: 12px;
        }

        .chart-container {
            height: 400px;
            margin: 20px 0;
            background: #fff;
            padding: 20px;
            border-radius: 8px;
            box-shadow: 0 2px 12px 0 rgba(0,0,0,.1);
        }

        .transformer-status {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 20px;
            margin-top: 20px;
        }

        .transformer-card {
            background: #fff;
            padding: 20px;
            border-radius: 8px;
            box-shadow: 0 2px 12px 0 rgba(0,0,0,.1);
        }

        .transformer-header {
            display: flex;
            align-items: center;
            margin-bottom: 15px;
        }

        .transformer-header i {
            font-size: 24px;
            margin-right: 10px;
            color: #409EFF;
        }

        .transformer-params {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 10px;
        }

        .transformer-param-item {
            background: #f8f9fa;
            padding: 10px;
            border-radius: 4px;
        }

        .energy-analysis {
            padding: 20px;
        }

        .analysis-card {
            margin-bottom: 20px;
        }

        .time-selector {
            margin-bottom: 20px;
        }

        .analysis-chart {
            height: 350px;
            margin: 20px 0;
            background: #fff;
            padding: 20px;
            border-radius: 8px;
            box-shadow: 0 2px 12px 0 rgba(0,0,0,.1);
        }

        .power-factor {
            display: flex;
            justify-content: space-between;
            margin-top: 20px;
        }

        .power-factor-card {
            flex: 1;
            margin: 0 10px;
            background: #fff;
            padding: 20px;
            border-radius: 8px;
            box-shadow: 0 2px 12px 0 rgba(0,0,0,.1);
            text-align: center;
        }

        .power-factor-value {
            font-size: 36px;
            font-weight: bold;
            color: #409EFF;
            margin: 10px 0;
        }

        .power-factor-label {
            color: #606266;
            font-size: 14px;
        }

        .room-info {
            padding: 15px;
            text-align: center;
        }

        .room-title {
            color: #409EFF;
            margin: 0 0 15px 0;
            font-size: 18px;
        }

        .room-status {
            margin-top: 15px;
            display: flex;
            justify-content: center;
            align-items: center;
            gap: 15px;
        }

        .update-time {
            color: #909399;
            font-size: 12px;
        }

        .el-carousel__item {
            background-color: #fff;
            border-radius: 4px;
        }
    </style>
</head>
<body>
    <div id="power-system">
        <el-tabs v-model="activeTab">
            <!-- 实时监测标签页 -->
            <el-tab-pane label="实时监测" name="monitor">
                <div class="power-monitor">
                    <!-- 主要电参数显示 -->
                    <el-card class="param-card">
                        <div slot="header">
                            <span>分区机房用电情况</span>
                        </div>
                        <el-carousel height="200px" :interval="4000" indicator-position="none">
                            <el-carousel-item>
                                <div class="room-info">
                                    <h3 class="room-title">主控机房（A区）</h3>
                                    <div class="param-grid">
                                        <div class="param-item">
                                            <div class="label">实时功率</div>
                                            <div class="value">28.5</div>
                                            <div class="unit">kW</div>
                                        </div>
                                        <div class="param-item">
                                            <div class="label">今日用电量</div>
                                            <div class="value">386.2</div>
                                            <div class="unit">kWh</div>
                                        </div>
                                        <div class="param-item">
                                            <div class="label">负载率</div>
                                            <div class="value">65</div>
                                            <div class="unit">%</div>
                                        </div>
                                    </div>
                                    <div class="room-status">
                                        <el-tag type="success" size="small">运行正常</el-tag>
                                        <span class="update-time">最后更新：2024-01-20 15:30:00</span>
                                    </div>
                                </div>
                            </el-carousel-item>
                            <el-carousel-item>
                                <div class="room-info">
                                    <h3 class="room-title">备用机房（B区）</h3>
                                    <div class="param-grid">
                                        <div class="param-item">
                                            <div class="label">实时功率</div>
                                            <div class="value">19.2</div>
                                            <div class="unit">kW</div>
                                        </div>
                                        <div class="param-item">
                                            <div class="label">今日用电量</div>
                                            <div class="value">245.8</div>
                                            <div class="unit">kWh</div>
                                        </div>
                                        <div class="param-item">
                                            <div class="label">负载率</div>
                                            <div class="value">45</div>
                                            <div class="unit">%</div>
                                        </div>
                                    </div>
                                    <div class="room-status">
                                        <el-tag type="success" size="small">运行正常</el-tag>
                                        <span class="update-time">最后更新：2024-01-20 15:30:00</span>
                                    </div>
                                </div>
                            </el-carousel-item>
                        </el-carousel>
                    </el-card>

                    <!-- 各区域用电负荷曲线 -->
                    <el-card class="param-card">
                        <div slot="header">
                            <span>区域用电负荷曲线</span>
                            <el-radio-group v-model="timeRange" size="small" style="float: right">
                                <el-radio-button label="day">日</el-radio-button>
                                <el-radio-button label="week">周</el-radio-button>
                                <el-radio-button label="month">月</el-radio-button>
                            </el-radio-group>
                        </div>
                        <div class="chart-container">
                            <div style="color: #909399; text-align: center; line-height: 400px;">
                                此处显示负荷曲线图表
                            </div>
                        </div>
                    </el-card>

                    <!-- 变压器运行状态 -->
                    <el-card class="param-card">
                        <div slot="header">
                            <span>变压器运行状态</span>
                        </div>
                        <div class="transformer-status">
                            <div class="transformer-card">
                                <div class="transformer-header">
                                    <i class='bx bx-broadcast'></i>
                                    <h3 style="margin: 0">1#主变压器</h3>
                                </div>
                                <div class="transformer-params">
                                    <div class="transformer-param-item">
                                        <div class="label">负载率</div>
                                        <el-progress :percentage="75" :color="customColors"></el-progress>
                                    </div>
                                    <div class="transformer-param-item">
                                        <div class="label">温度</div>
                                        <div style="color: #409EFF; font-size: 16px;">45°C</div>
                                    </div>
                                </div>
                            </div>
                            <div class="transformer-card">
                                <div class="transformer-header">
                                    <i class='bx bx-broadcast'></i>
                                    <h3 style="margin: 0">2#主变压器</h3>
                                </div>
                                <div class="transformer-params">
                                    <div class="transformer-param-item">
                                        <div class="label">负载率</div>
                                        <el-progress :percentage="65" :color="customColors"></el-progress>
                                    </div>
                                    <div class="transformer-param-item">
                                        <div class="label">温度</div>
                                        <div style="color: #409EFF; font-size: 16px;">42°C</div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </el-card>
                </div>
            </el-tab-pane>

            <!-- 能效分析标签页 -->
            <el-tab-pane label="能效分析" name="analysis">
                <div class="energy-analysis">
                    <!-- 用电量统计 -->
                    <el-card class="analysis-card">
                        <div slot="header">
                            <span>用电量统计</span>
                            <el-radio-group v-model="analysisRange" size="small" style="float: right">
                                <el-radio-button label="day">日</el-radio-button>
                                <el-radio-button label="week">周</el-radio-button>
                                <el-radio-button label="month">月</el-radio-button>
                            </el-radio-group>
                        </div>
                        <div class="analysis-chart">
                            <div style="color: #909399; text-align: center; line-height: 350px;">
                                此处显示用电量统计图表
                            </div>
                        </div>
                    </el-card>

                    <!-- 峰谷平用电分析 -->
                    <el-card class="analysis-card">
                        <div slot="header">
                            <span>峰谷平用电分析</span>
                        </div>
                        <div class="analysis-chart">
                            <div style="color: #909399; text-align: center; line-height: 350px;">
                                此处显示峰谷平用电分析图表
                            </div>
                        </div>
                    </el-card>

                    <!-- 功率因数分析 -->
                    <el-card class="analysis-card">
                        <div slot="header">
                            <span>功率因数分析</span>
                        </div>
                        <div class="power-factor">
                            <div class="power-factor-card">
                                <div class="power-factor-label">A相功率因数</div>
                                <div class="power-factor-value">0.92</div>
                                <el-progress type="circle" :percentage="92"></el-progress>
                            </div>
                            <div class="power-factor-card">
                                <div class="power-factor-label">B相功率因数</div>
                                <div class="power-factor-value">0.94</div>
                                <el-progress type="circle" :percentage="94"></el-progress>
                            </div>
                            <div class="power-factor-card">
                                <div class="power-factor-label">C相功率因数</div>
                                <div class="power-factor-value">0.93</div>
                                <el-progress type="circle" :percentage="93"></el-progress>
                            </div>
                        </div>
                    </el-card>
                </div>
            </el-tab-pane>
        </el-tabs>
    </div>

    <script src="https://unpkg.com/vue@2.6.14/dist/vue.js"></script>
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <script>
        new Vue({
            el: '#power-system',
            data() {
                return {
                    activeTab: 'monitor',
                    timeRange: 'day',
                    analysisRange: 'day',
                    customColors: [
                        {color: '#67C23A', percentage: 60},
                        {color: '#E6A23C', percentage: 80},
                        {color: '#F56C6C', percentage: 100}
                    ]
                }
            }
        })
    </script>
</body>
</html> 